<template>
  <view class="content">
    <view class="content-header">报名信息填写</view>
    <view class="content-form">
      <u--form labelPosition="left" :borderBottom="false" :model="form" labelWidth="100px" :rules="rules" ref="formRef">
        <u-form-item>推荐人</u-form-item>
        <u-form-item label="姓名" borderBottom ref="item1"><u--input v-model="form.jobSeekerByRecommendedDto.realName" border="none"></u--input></u-form-item>
        <u-form-item label="电话" borderBottom ref="item1"><u--input v-model="form.jobSeekerByRecommendedDto.telPhone" type="number" border="none"></u--input></u-form-item>
        <u-form-item label="工号" borderBottom ref="item1"><u--input v-model="form.jobSeekerByRecommendedDto.workNum" border="none"></u--input></u-form-item>
        <u-form-item>被推荐人</u-form-item>
        <u-form-item label="姓名" borderBottom ref="item1"><u--input v-model="form.realName" border="none"></u--input></u-form-item>
        <u-form-item label="电话" borderBottom ref="item1"><u--input v-model="form.telPhone" border="none" type="number"></u--input></u-form-item>
        <u-form-item label="身份证号" borderBottom ref="item1"><u--input v-model="form.idCard" type="idcard" border="none"></u--input></u-form-item>

        <u-form-item label="面试日期" borderBottom @click="showDate = true" ref="item1">
          <u--input v-model="form.interviewTime" disabled disabledColor="#ffffff" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="面试职位" borderBottom @click="jonposition = true" ref="item1">
          <u--input v-model="form.jobTypeId" disabledColor="#ffffff" border="none" disabled></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="岗位编号" borderBottom @click="showCode = true" ref="item1">
          <u--input v-model="form.jobNum" disabledColor="#ffffff" border="none" disabled></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="毕业时间" borderBottom @click="biyeDate = true" ref="item1">
          <u--input v-model="form.graduationTime" disabled disabledColor="#ffffff" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="学历信息" borderBottom>
          <view class="uli" @click="chooseImage">
            <!--  <image src="http://img.com/l_a10.png" mode="aspectFill"></image> -->
            <view class="uli" v-for="(item,index) in urls" :key="index"><image mode="aspectFill" :src="item"></image></view>
          </view>
        </u-form-item>
      </u--form>

      <u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>

      <u-datetime-picker :show="showDate" :value="dateTime" mode="date" closeOnClickOverly @confirm="dateTimechange" @cancel="dateClose" @close="dateClose"></u-datetime-picker>

      <u-datetime-picker :show="biyeDate" :value="dateBiye" mode="date" closeOnClickOverly @confirm="BiyeTimechange" @cancel="BiyeClose" @close="BiyeClose"></u-datetime-picker>

      <u-action-sheet :show="jonposition" :actions="postList" title="请选择" @close="jonposition = false" @select="postlistSelest"></u-action-sheet>

      <u-action-sheet :show="showCode" :actions="actionsList" title="请选择" @close="showCode = false" @select="codeSelect"></u-action-sheet>
    </view>

    <!-- 更新个人信息的弹窗 -->
    <u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
      <view class="u-popup-slot">
        <view>提示</view>
        <view>是否将信息保存到个人信息</view>
        <view style="display: flex;justify-content: space-between;align-items: center;">
          <u-button type="default" text="确定" @click="getchange"></u-button>
          <u-button type="default" text="取消" @click="dongetchange"></u-button>
        </view>
    	 </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      urls: [],
      imgList: '',
      form: {
        graduationTime: '', //毕业时间
        idCard: '', //身份证
        interviewTime: '', //面试时间
        isUpdate: null, //是否更新用户信息  1是 0否
        jobNum: '', //面试职位代号
        jobTypeId: null, //面试职位类型ID
        realName: '', //名字
        recruitmentType: 1, // 1社招 2校招
        schoolProveUrl: '', //学历证明图片地址
        signUpType: null, // 1内部推荐 2外部推荐
        telPhone: '', //电话
        // 用户信息
        jobSeekerByRecommendedDto: {
          avatarUrl: '',
          graduationTime: '',
          idCard: '',
          openId: '',
          realName: '',
          schoolProveUrl: '',
          telPhone: '',
          workNum: ''
        }
      },

      showDate: false, //控制面试时间
      biyeDate: false, //控制毕业时间
      jonposition: false, //控制职位
      showCode: false,
      show: false,
      userList: {}, //用户的基本信息
      dateTime: Number(new Date()),
      dateBiye: Number(new Date()),
      postList: [], //岗位信息列表
      actionsList: [],
      // 验证规则
      rules: {
        'form.realName': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'jobSeekerBySelfDto.telPhone': {
          type: 'string',
          required: true,
          message: '请填写电话',
          trigger: ['blur', 'change']
        },
        'jobSeekerBySelfDtos.idCard': {
          type: 'string',
          required: true,
          message: '请填写身份证',
          trigger: ['blur', 'change']
        },
        'userInfo.sex': {
          type: 'string',
          required: true,
          message: '请填写岗位类别',
          trigger: ['blur', 'change']
        },
        'userInfo.code': {
          type: 'string',
          required: true,
          message: '请填写岗位编号',
          trigger: ['blur', 'change']
        },
        'userInfo.birthday': {
          type: 'string',
          required: true,
          message: '请选择日期',
          trigger: ['change']
        }
      }
    };
  },
  onLoad(options) {
    this.form.signUpType = options.id;
    this.userList = uni.getStorageSync('userinfo');
    console.log('我是用户基本信息===>', this.userList);
    this.getPostList();
    this.updateuserlist();
  },

  methods: {
    // 给表单赋值用户基本信息
    updateuserlist() {
      this.form.jobSeekerByRecommendedDto.realName = this.userList.realName;
      this.form.jobSeekerByRecommendedDto.graduationTime = this.userList.graduationTime;
      this.form.jobSeekerByRecommendedDto.avatarUrl = this.userList.avatarUrl;
      this.form.jobSeekerByRecommendedDto.telPhone = this.userList.telPhone;
      this.form.jobSeekerByRecommendedDto.idCard = this.userList.idCard;
      this.form.jobSeekerByRecommendedDto.schoolProveUrl = this.userList.schoolProveUrl;
      this.form.jobSeekerByRecommendedDto.workNum = this.userList.workNum;
      this.form.jobSeekerByRecommendedDto.openId = this.userList.openId;
    },

    // 获取岗位信息列表
    async getPostList() {
      const { data } = await uni.$http.get('/jobType/findAll');
      if (data.statusCode !== 200) {
        return;
      } else {
        const arr = data.data;
        for (var i = 0; i < arr.length; i++) {
          this.postList.push({
            name: arr[i].typeName,
            id: arr[i].id
          });
        }
        console.log('arrrrr', this.postList);
      }
    },
    async postlistSelest(e) {
      console.log('我是e', e);
      this.form.jobTypeId = e.id;
      this.$refs.formRef.validateField('userInfo.sex');
      const { data } = await uni.$http.get('/job/findJobNumByTypeId?id=' + e.id);
      const obj = data.data;
      obj.forEach(item => {
        this.actionsList.push({
          name: item
        });
      });
    },
    codeSelect(e) {
      console.log('我是e', e);
      this.form.jobNum = e.name;
      this.$refs.formRef.validateField('userInfo.code');
    },
    dateClose() {
      this.showDate = false;
      this.$refs.formRef.validateField('userInfo.birthday');
    },
    dateTimechange(e) {
      this.showDate = false;
      this.form.interviewTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
      this.$refs.formRef.validateField('userInfo.birthday');
    },
    BiyeClose() {
      this.showDate = false;
      this.$refs.formRef.validateField('userInfo.birthday');
    },
    BiyeTimechange(e) {
      this.biyeDate = false;
      this.form.graduationTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
      this.$refs.formRef.validateField('userInfo.birthday');
    },
    chooseImage() {
      var that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图
        sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机
        success: function(res) {
          console.log('我是res', JSON.stringify(res.tempFilePaths));
          const tempFilePaths = res.tempFilePaths;
          console.log('tempFilePaths', tempFilePaths);
          that.urls = tempFilePaths;
          uni.uploadFile({
            url: uni.$http.baseUrl + '/upload/uploadPic',
            filePath: that.urls[0],
            name: 'file',
            success(uploadFileRes) {
              // console.log('uploadFileRes.data===>' , JSON.parse(uploadFileRes.data));
              const photores = JSON.parse(uploadFileRes.data);
              console.log('uploadFileRes.data===>', photores);
              if (photores.statusCode !== 200) {
                return;
              } else {
                that.form.schoolProveUrl = photores.data;
              }

              console.log('wowowowwo', that.form);
            }
          });
        }
      });
    },
    submit() {
      // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
      this.$refs.formRef
        .validate()
        .then(res => {
          uni.$u.toast('校验通过');
          console.log('this.userList', this.userList);
          console.log('this.form', this.form);
          const Obj = {
            avatarUrl: this.userList.avatarUrl,
            graduationTime: this.userList.graduationTime,
            idCard: this.userList.idCard,
            openId: this.userList.openId,
            realName: this.userList.realName,
            schoolProveUrl: this.userList.schoolProveUrl,
            telPhone: this.userList.telPhone,
            workNum: this.userList.workNum
          };
          console.log('objobj', Obj);
          if (JSON.stringify(this.form.jobSeekerByRecommendedDto) === JSON.stringify(Obj)) {
            this.form.isUpdate = 0;
            const res = uni.$http.post('/sign/signUpAddByRecommended', this.form);
            console.log('提交完成', res);
            if (res.statusCode !== 200) {
              uni.showToast({
                title: res.message,
                icon: 'none'
              });
            } else {
              uni.showToast({
                title: res.message,
                icon: 'success'
              });
              setTimeout(function() {
                uni.navigateBack();
              }, 700);
            }
          } else {
            this.show = true;
          }
        })
        .catch(errors => {
          uni.$u.toast('校验失败');
        });
    },
    open() {
      console.log('open');
    },
    close() {
      this.show = false;
      console.log('close');
    },
    // 更新用户信息并提交
    async getchange() {
      this.form.isUpdate = 1;
      const res = await uni.$http.post('/sign/signUpAddByRecommended', this.form);
      console.log('提交提交', this.form);
      console.log('res', res);
      if (res.statusCode !== 200) {
         uni.showToast({
          title: res.message,
          icon: 'none'
        });
      } else {
        this.show = false;
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        setTimeout(function() {
          uni.navigateBack();
        }, 700);
      }
    },
    // 不更新用户信息并提交
    async dongetchange() {
      this.form.isUpdate = 0;
      const res = await uni.$http.post('/sign/signUpAddByRecommended', this.form);
      console.log('提交提交', this.form);
      console.log('res', res);
      if (res.statusCode !== 200) {
         uni.showToast({
          title: res.message,
          icon: 'none'
        });
      } else {
        this.show = false;
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        setTimeout(function() {
          uni.navigateBack();
        }, 700);
      }
    }
  }
};
</script>

<style lang="scss">
.content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ccc;

  .content-header {
    height: 300rpx;
    background-color: #02a7f0;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    color: #ffffff;
  }

  .content-form {
    position: fixed;
    top: 5%;
    left: 10%;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    width: 80%;
    border-radius: 30rpx;
    background-color: #ffffff;

    input {
      height: 40rpx;
      font-size: 20rpx;
    }

    .u-form-item__body__left__content__label.data-v-5e7216f1 {
      font-size: 24rpx;
    }

    .u-form-item__body.data-v-5e7216f1 {
      padding: 5px;
    }
  }
  .u-popup-slot {
    width: 200px;
    height: 150px;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    view {
      margin: 20rpx 0;
    }
  }
  .uli {
    width: 70rpx;
    height: 70rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
